<!-- Back button with custom text and icon -->
<ion-header>
  <ion-toolbar>
    <ion-title>{{isViewMode?'收发货设置查看':'收发货设置新增/编辑'}}</ion-title>
    <ion-buttons slot="primary">
      <ion-button (click)="dismiss()">
        <ion-icon name="close-outline"></ion-icon> 关闭
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-infinite-scroll>
    <!-- List of Input Items -->
    <ion-list>
      <div>
        <ion-radio-group [(ngModel)]="data.property">
          <ion-item>
            <ion-label><span style="color:red">* </span>是否为法人：</ion-label>
          </ion-item>
          <ion-item>
            <ion-label>企业</ion-label>
            <ion-radio slot="end" [value]="1"></ion-radio>
          </ion-item>

          <ion-item>
            <ion-label>自然人</ion-label>
            <ion-radio slot="end" [value]="2"></ion-radio>
          </ion-item>
        </ion-radio-group>
      </div>

      <ion-item>
        <ion-label><span style="color:red">* </span>类别：</ion-label>
        <ion-select placeholder="选择类别" okText="确定" cancelText="取消" [(ngModel)]="data.type">
          <ion-select-option [value]="1">发货</ion-select-option>
          <ion-select-option [value]="2">收货</ion-select-option>
        </ion-select>
      </ion-item>
      <ion-item>
        <ion-label><span style="color:red">* </span>省份</ion-label>
        <ion-select placeholder="选择省份" okText="确定" cancelText="取消" [(ngModel)]="data.provinceId"
          (ionChange)="provinceChange($event)" selectedText="{{provinceText}}">
          <ion-select-option *ngFor="let item of provinceData" [value]="item.value">{{item.label}}</ion-select-option>
        </ion-select>
      </ion-item>
      <ion-item>
        <ion-label><span style="color:red">* </span>城市</ion-label>
        <ion-select placeholder="选择城市" okText="确定" cancelText="取消" [(ngModel)]="data.cityId"
          (ionChange)="cityChange($event)" selectedText="{{cityText}}">
          <ion-select-option *ngFor="let item of cityData" [value]="item.value">{{item.label}}</ion-select-option>
        </ion-select>
      </ion-item>
      <ion-item>
        <ion-label><span style="color:red">* </span>区/县</ion-label>
        <ion-select placeholder="选择区域" okText="确定" cancelText="取消" [(ngModel)]="data.districtId"
        (ionChange)="districtChange($event)" selectedText="{{districtText}}">
          <ion-select-option *ngFor="let item of districtData" [value]="item.value">{{item.label}}</ion-select-option>
        </ion-select>
      </ion-item>
      <ion-item>
        <ion-label><span style="color:red">* </span>收发货地址：</ion-label>
        <ion-input [(ngModel)]="data.address"></ion-input>
      </ion-item>
    </ion-list>

    <ion-list [hidden]="data.property!=1">
      <ion-item>
        <ion-label><span style="color:red">* </span>单位及法人代表名称：</ion-label>
        <ion-input [(ngModel)]="data.companyName"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label><span style="color:red">* </span>联系人：</ion-label>
        <ion-input [(ngModel)]="data.companyContactPeople"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label><span style="color:red">* </span>联系电话：</ion-label>
        <ion-input [(ngModel)]="data.companyPhoneNumber"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label><span style="color:red">* </span>通讯地址：</ion-label>
        <ion-input [(ngModel)]="data.companyAddress"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>统一社会信用代码：</ion-label>
        <ion-input [(ngModel)]="data.companyDeliverySocialCreditCode"></ion-input>
      </ion-item>
    </ion-list>

    <ion-list [hidden]="data.property!=2">
      <ion-item>
        <ion-label><span style="color:red">* </span>姓名：</ion-label>
        <ion-input [(ngModel)]="data.naturalDeliveryName"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label><span style="color:red">* </span>联系电话：</ion-label>
        <ion-input [(ngModel)]="data.naturalPhoneNumber"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>有效证件号码：</ion-label>
        <ion-input [(ngModel)]="data.naturalIdNumber"></ion-input>
      </ion-item>
    </ion-list>
  </ion-infinite-scroll>

  <div style="text-align: right;margin-right:50px;margin-bottom:50px;" *ngIf="!isViewMode">
    <ion-button color="primary" (click)="onSave()" [disabled]="disabledSave">保存</ion-button>
  </div>

</ion-content>